<template>
  <scroll-view scroll-y enable-flex class="video-main"
    @scrolltolower="handleScrollTolower">
    <view class="video-item" v-for="item in videowp" :key="item.id"
      @click="handleGoVideo(item)">
      <image :src="item.img" mode="widthFix"></image>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      // 数据数组
      videowp: [],
      hasMore: true
    }
  },
  props: {
    requestObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    // 因为前四个标签都是用同一个组件显示页面，而这个组件只能挂载一次，即前四个标签来回切换只能发送一次请求
    // 所以可以通过watch监听请求参数的变化而重新发送请求
    requestObj: {
      handler(newVal, oldVal) {
        this.videowp = []
        this.hasMore = true
        this.getList()
      }
      // 在第一次绑定的时候执行此监听函数 则需要 设置immediate为true
      // immediate: true
    }
  },
  mounted() {
    // 第一次发送请求可以在mounted发送，第二种方法是通过上面watch将immediate设置为true
    this.getList()
  },
  methods: {
    // 获取数据
    async getList() {
      const res = await this.request({
        url: this.requestObj.url,
        data: this.requestObj.params
      })
      if (res.res.videowp.length === 0) {
        this.hasMore = false
        uni.showToast({
          title: '没有更多了~',
          icon: 'none'
        })
        return
      }
      this.videowp = [...this.videowp, ...res.res.videowp]
    },
    // 触底加载更多
    handleScrollTolower() {
      if (this.hasMore) {
        this.requestObj.params.skip += this.requestObj.params.limit
        this.getList()
      } else {
        uni.showToast({
          title: '没有更多了~',
          icon: 'none'
        })
      }
    },
    // 图片点击
    handleGoVideo(item) {
      /**
      1 将数据存到全局共享中
      2 页面跳转
       */
      getApp().globalData.video = item
      uni.navigateTo({
        url: '/pages/videoPlay/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.video-main {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 36px);
  padding: 5rpx 0 0 5rpx;
  .video-item {
    width: 33.33%;
    border-right: 5rpx solid #fff;
    border-bottom: 5rpx solid #fff;
  }
}
</style>